/**
 * api列表
 */
import React from 'react';
import styles from '../../index.less';
import { connect, connectMaster } from 'umi';
import { Space, Table } from 'antd';
import moment from 'moment';

@connectMaster //接收主服务数据
@connect(({ MyRole }) => ({
  MyRole,
}))
export default class extends React.Component {
  state = {
    btnType: '数据源权限',
    apiGroupName:[],
    grouloIdObj:{},//通过groulpId拿到的api分组名
  };
  componentDidMount = async () => {
    const { apiList } = this.props.MyRole;
    if(apiList.length!==0){
      this.groupId(apiList);
    }
  };


  //更新状态
  changeState = obj => {
    this.props.dispatch({
      type: 'MyRole/setState',
      payload: obj,
    });
  };
  // 点击查看  查询api详情
  getApiDetail = async apiId => {
    let obj = {
      id:apiId
    };
    let rs = await this.props.dispatch({
      type: 'MyRole/getApiDetail',
      payload: obj,
    });
    if (rs.success) {
      this.changeState({
        apiPop: rs.data,
      });

      // 获取服务单元名称
      this.getServeUnit(rs.data.serveUnitId)
    }
  };
  // 服务单元名称
  getServeUnit = async (id)=>{
    let obj={
      id:id
    }
    let rs= await this.props.dispatch({
        type: 'MyRole/getServeUnits',
        payload:obj,
    })
    if(rs.success){
      this.changeState({
        serveUnitName:rs.data.name
      })
    }
  }
  
  // 循环得到groupId
  groupId =(apiList)=>{
    let Obj={};
    let arr=apiList.map(val=>{
      Obj[val.groupId]="";
      return val.groupId
    })
    this.setState({
      grouloIdObj:Obj
    })

    this.selBatchGroup(arr);
  }

  // api分组名称
  selBatchGroup = async (arr)=>{
    let rs=await this.props.dispatch({
      type:"MyRole/selBatchGroup",
      payload:arr
    })
    // console.log(rs,"分组名称");
    if(rs.success){
      rs.data.forEach(val=>{
        this.state.grouloIdObj[val.id]=val.name;
        this.setState({
          grouloIdObj:this.state.grouloIdObj
        })
      })
    }
    
  }

  // 返回table列表
  renderTableData = (item, i) => {
    return {
      key: i,
      1: item.apiName,
      2: this.state.grouloIdObj[item.groupId],
      3: `${moment(item.startTime).format('YYYY-MM-DD HH:mm:ss')}——${moment(
        item.endTime,
      ).format('YYYY-MM-DD HH:mm:ss')}`,
      4: moment(item.applyTime).format('YYYY-MM-DD HH:mm:ss'),
      options: (
        <div>
          <Space size="middle">
            <a
              key={'view'}
              onClick={() => {
                this.changeState({
                  addVisible: true,
                  addVisibleModalType: 'apiSee',
                });
                console.log(item)
                this.getApiDetail(item.apiId);
              }}
            >
              查看
            </a>
          </Space>
        </div>
      ),
    };
  };

  render() {
    const columns = [
      { title: 'API名称', dataIndex: '1' },
      { title: 'api分组',width:"20%", dataIndex: '2' },
      { title: '权限有效期', width:"35%" ,dataIndex: '3' },
      { title: '申请时间',  dataIndex: '4' },
      { title: '操作',  dataIndex: 'options', fixed: 'right' },
    ];
    const { apiList, apiTotal, apiPageSize, apiPageNum } = this.props.MyRole;
    return (
      <div className={styles.TableContain}>
        <div className={styles.TableList}>
          <div className={styles.total} style={{ left: '10px' }}>
            共{apiTotal}条记录 第 {apiPageNum} /
            {(() => {
              var num = parseInt(apiTotal / apiPageSize);
              if (apiTotal % apiPageSize != 0) num += 1;
              return num;
            })()}{' '}
            页
          </div>
          <Table
            columns={columns}
            dataSource={apiList.map((item, i) => this.renderTableData(item, i))}
            onChange={(pagination, filters, sorter) => {
              const {dataInput}=this.props.parentThis.state;
              const {getApiSoure}=this.props.parentThis;
              let {pageSize,current}=pagination;
              // this.changeState({
              //   apiPageNum:current,
              //   apiPageSize:pageSize
              // })
              getApiSoure(dataInput,current,pageSize)
            }}
            pagination={{
              showSizeChanger: true,
              showQuickJumper: true,
              current: apiPageNum,
              pageSize: apiPageSize,
              total: apiTotal,
              onShowSizeChange: (current, pageSize) => {},
            }}
          />
        </div>
      </div>
    );
  }
}
